<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            /*子绝父相*/
            position: relative;

            /*CSS3 盒子模型*/
            box-sizing:border-box;/*border和padding不会影响盒子大小，但是会影响内容*/

            width:250px;
            height:30px;
            border:1px solid #000;
        }
        .sj{
            border-top: 1px solid red;
            border-left: 1px solid darkred;
            /*绝对定位的行内元素，有行内块元素的特点*/
            width:6px;
            height:6px;
            position: absolute;
            top:50%;
            right:6px;
            /*transform:translateY(-50%);/*垂直居中*/

            /*必须先平移后旋转，必须一起写，不然第一个写的不起作用*/
            transform:translateY(-50%) rotate(225deg);

            transition:transform 2s;
        }
        .box .sj:hover{
            transform:translateY(-50%) rotate(405deg);
        }

    </style>
</head>
<body>
<div class="box">
    <span class="sj"></span>
</div>
</body>
</html>